{% extends "SalarySysMenu/Main.html" %}
{% load staticfiles %}

{% block CSSAnotherhead %}
<link rel="stylesheet" href="{% static 'plugins/timepicker/bootstrap-timepicker.min.css'%}">
<link rel="stylesheet" href="{% static 'bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css'%}">
<style>
  .example-modal .modal {
    position: relative;
    top: auto;
    bottom: auto;
    right: auto;
    left: auto;
    display: block;
    z-index: 1;
  }

  .example-modal .modal {
    background: transparent !important;
  }
</style>
{% endblock %}
{% block bodyhead %}

<body class="hold-transition skin-purple-light sidebar-mini" onload="initPage();initloadding();">

  {% endblock %}
  {% block loadJSfirst %}

  <script>
    function initloadding() {

      document.getElementById("inputEmail1").disabled = true;
      document.getElementById("inputPhoneNum1").disabled = true;
      document.getElementById("inputAdress1").disabled = true;

    }
    function checkEmail() {
      var temp = document.getElementById("inputEmail1");

      var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;

      if (!myreg.test(temp.value)) {
        document.getElementById("inputError5").style.display = "inline";
        document.getElementById("inputError6").style.display = "none";
        document.getElementById("778899zc").disabled = true;

      } else {
        document.getElementById("inputError5").style.display = "none";
        document.getElementById("inputError6").style.display = "inline";
        document.getElementById("778899zc").disabled = false;
      }
    }

    function checkPhone() {
      var temp = document.getElementById("inputPhoneNum1");

      var myreg = /^(13+\d{9})|(17+\d{9})|(15+\d{9})|(18+\d{9})$/;

      if (!myreg.test(temp.value)) {
        document.getElementById("inputError7").style.display = "inline";
        document.getElementById("inputError8").style.display = "none";
        document.getElementById("778899zc").disabled = true;

      } else {
        document.getElementById("inputError7").style.display = "none";
        document.getElementById("inputError8").style.display = "inline";
        document.getElementById("778899zc").disabled = false;
      }
      if (temp.value.length != 11) {
        document.getElementById("inputError7").style.display = "inline";
        document.getElementById("inputError8").style.display = "none";
        document.getElementById("778899zc").disabled = true;
      }

    }

    function checksame() {

      var temp = document.getElementById("inputAdress1").value;
      var temp1 = document.getElementById("inputAdresshidden").value;

      if (temp != temp1) {
        document.getElementById("inputError9").style.display = "none";
        document.getElementById("inputError10").style.display = "inline";
        document.getElementById("778899zc").disabled = false;

      } else {
        document.getElementById("inputError9").style.display = "inline";
        document.getElementById("inputError10").style.display = "none";
        document.getElementById("778899zc").disabled = true;

      }
    }
    function showit() {
      document.getElementById("7788zc").style.display = "none";
      document.getElementById("778899zc").style.display = "inline";
      document.getElementById("inputEmail1").disabled = false;
      document.getElementById("inputPhoneNum1").disabled = false;
      document.getElementById("inputAdress1").disabled = false;
    }
  </script>


  {% endblock %}

  {% block Myfile %}
  <li class="active treeview">
    <a href="#">
      <i class="fa fa-bank"></i>
      <span> 我的资料</span>
      <span class="pull-right-container">
        <i class="fa fa-angle-left pull-right"></i>
      </span>
    </a>
    <ul class="treeview-menu">
      <li class="active"><a href="{% url 'GZGL:myprofile' %}"><i class="fa fa-circle-o"></i> 资料详情</a></li>
      <li><a href="{% url 'GZGL:setpassword' %}"><i class="fa fa-circle-o"></i> 修改密码</a></li>

    </ul>
  </li>
  {% endblock %}
  {% block content %}
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        我的资料
        <small>资料详情</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
      </ol>

    </section>

    <!-- Main content -->
    <section class="content container-fluid">

      <!--------------------------
        | Your Page Content Here |
        -------------------------->
      <div class="row">
        {% include 'SalarySysMenu/reference/ProfileTask.html' %}
        <div class="col-md-9">
          <div class="nav-tabs-custom">

            <ul class="nav nav-tabs">
              <li class="active"><a href="#修改资料" data-toggle="tab">修改资料</a></li>


            </ul>

            <div class="tab-content">

              <div class="active tab-pane" id="修改资料">
                <form class="form-horizontal" method="POST">
                  {% csrf_token %}
                  <div class="form-group">
                    <label for="inputID" class="col-sm-2 control-label">员工ID</label>

                    <div class="col-sm-6">
                      <input type="text" class="form-control" id="inputID" placeholder="{{here.staff_id}}" disabled>
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputName" class="col-sm-2 control-label">姓名</label>

                    <div class="col-sm-6">
                      <input type="text" class="form-control" id="inputName" placeholder="{{here.staff_name}}" disabled>
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputsex" class="col-sm-2 control-label">性别</label>

                    <div class="col-sm-6">
                      <input type="text" class="form-control" id="inputsex" placeholder="{{here.staff_sex}}" disabled>
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputEmail" class="col-sm-2 control-label">邮箱</label>

                    <div class="col-sm-6" id="form-group">
                      <input type="email" name="inputemail" class="form-control" id="inputEmail1"
                        value="{{here.staff_email}}" placeholder="{{here.staff_email}}" onkeyup="checkEmail()">
                      <input type="hidden" name="inputemail2" class="form-control" id="inputEmailhidden"
                        value="{{here.staff_email}}">
                    </div>
                    <div id="inputError5" style="display:none">
                      <label class="control-label" for="inputError">
                        <i class="fa fa-times-circle-o"></i> 邮箱格式不正确</label></div>
                    <div id="inputError6" style="display:none">
                      <label class="control-label" for="inputSuccess">
                        <i class="fa fa-check"></i>邮箱格式正确</label></div>

                  </div>
                  <div class="form-group">
                    <label for="inputPhoneNum" class="col-sm-2 control-label">手机号码</label>

                    <div class="col-sm-6">
                      <input type="text" name="inputphone" class="form-control" id="inputPhoneNum1"
                        value="{{here.staff_phonenum}}" placeholder="{{here.staff_phonenum}}" onkeyup="checkPhone()"
                        data-inputmask='"mask": "99999999999"' data-mask>
                      <input type="hidden" name="inputphone2" class="form-control" id="inputPhoneNumhidden"
                        value="{{here.staff_phonenum}}">
                    </div>
                    <div id="inputError7" style="display:none">
                      <label class="control-label" for="inputError">
                        <i class="fa fa-times-circle-o"></i> 手机号码格式不正确</label></div>
                    <div id="inputError8" style="display:none">
                      <label class="control-label" for="inputSuccess">
                        <i class="fa fa-check"></i>手机号码格式正确</label></div>
                  </div>

                  <div class="form-group">
                    <label for="inputAdress" class="col-sm-2 control-label">通讯地址</label>

                    <div class="col-sm-6">
                      <input type="text" name="inputaddress" class="form-control" id="inputAdress1"
                        value="{{here.staff_address}}" placeholder="{{here.staff_address}}" onkeyup="checksame()">
                      <input type="hidden" name="inputaddress2" class="form-control" id="inputAdresshidden"
                        value="{{here.staff_address}}">
                    </div>
                    <div id="inputError9" style="display:none">
                      <label class="control-label" for="inputError">
                        <i class="fa fa-times-circle-o"></i> 通讯地址X</label></div>
                    <div id="inputError10" style="display:none">
                      <label class="control-label" for="inputSuccess">
                        <i class="fa fa-check"></i>通讯地址正确</label></div>
                  </div>
                  <div class="form-group">
                    <label for="inputBirthday" class="col-sm-2 control-label">生日</label>

                    <div class="col-sm-6">
                      <div class="input-group date">
                        <div class="input-group-addon">
                          <i class="fa fa-calendar"></i>
                        </div>
                        <input type="text" name="inputbirthday" class="form-control pull-right" id="datepicker" value=""
                          placeholder="{{here.staff_birthday}}" disabled>
                      </div>
                    </div>

                  </div>
                  <div class="form-group">
                    <label for="inputStaffType" class="col-sm-2 control-label">员工类型</label>

                    <div class="col-sm-6">
                      <input type="text" class="form-control" id="inputStaffType"
                        placeholder="{{here.staff_Employee_type}}" disabled>
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="inputStaffJoinTime" class="col-sm-2 control-label">入职时间</label>

                    <div class="col-sm-6">
                      <input type="text" class="form-control" id="inputStaffJoinTime"
                        placeholder="{{here.staff_InJobdate}}" disabled>
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputSalary" class="col-sm-2 control-label">基本工资</label>

                    <div class="col-sm-6">
                      <input type="text" class="form-control" id="inputSalary" placeholder="{{here.staff_Base_Salary}}元"
                        disabled>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                      <button type="submit" class="btn btn-danger" id="778899zc" style="display:none;" disabled> 提 交
                      </button>
                      <button type="button" class="btn btn-warning" id="7788zc" onclick="showit()"> 修改我的资料 </button>
                    </div>
                  </div>
                </form>
              </div>
              <!-- /.tab-pane -->
            </div>
            <!-- /.tab-content -->
          </div>
          <!-- /.nav-tabs-custom -->
        </div>
      </div>

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  {% endblock %}
  {% block JSAnotherFile %}
  <script src="{% static 'bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js'%}"></script>
  <script src="{% static 'plugins/input-mask/jquery.inputmask.js'%}"></script>
  <script src="{% static 'plugins/timepicker/bootstrap-timepicker.min.js'%}"></script>
  <script src="{% static 'bower_components/bootstrap-daterangepicker/daterangepicker.js'%}"></script>
  <script src="{% static 'bower_components/fastclick/lib/fastclick.js'%}" type="text/javascript"></script>

  {% endblock %}